<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 盒子阴影：box-shadow:10px 20px 30px rgba(0,0,0,0.5);  x偏移(右) y偏移（下） 模糊量(越大越模糊) 颜色 */
        /* 注意是box-shadow，不是border-shadow */
        /* 阴影延展：boxr-shadow:10px 20px 30px 40px rgba(0,0,0,0,5) x偏移 y偏移 模糊量  阴影延展  颜色 */
        /* 内阴影： box-shadow: inset 10px 20px 30px 40px rgba(0,0,0,0,5)  即在前面加inset*/
        /* 多阴影：用逗号隔开，表示多个阴影。 */
        div.box1{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid #000;
            box-shadow:10px 20px 30px rgba(18, 105, 192, 0.5);
            margin-bottom:10px;
        }
        div.box2{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid #000;
            box-shadow:10px 20px 30px 4px rgba(18, 105, 192, 0.5);
            margin-bottom:100px;
        }
        div.box3{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid #000;
            box-shadow:inset 10px 20px 30px white;
            margin-bottom:10px;
        }
        div.box4{
            width: 100px;
            height: 100px;
            background-color: wheat;
            border: 1px solid #000;
            box-shadow:2px 2px 2px red,4px 4px 4px blue ,6px 6px 6px yellow,inset 2px 2px 2px white;
            margin-bottom:10px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>